let select_ul = document.querySelector('.select-ul');
let select_lis = document.querySelectorAll('.select-lis');
var show_box = document.querySelectorAll('.show-box');
for (var i = 0; i < select_lis.length; i++) {
    select_lis[i].setAttribute('index', i)
    select_lis[i].addEventListener('click', function() {
        for (var i = 0; i < select_lis.length; i++) {
            select_lis[i].className = `select-lis`;
        }
        this.className = 'select-lis select-lisDemo';
        var index = this.getAttribute('index');
        for (var i = 0; i < show_box.length; i++) {
            show_box[i].style.display = 'none';
        }
        show_box[index].style.display = 'block';
    })
    select_lis[0].className = 'select-lis select-lisDemo';
}
select_lis[2].addEventListener('click', function() {
    select_ul.style.transform = `translateX(${-5.15}rem)`;
})
select_lis[1].addEventListener('click', function() {
    select_ul.style.transform = `translateX(${0}rem)`;
})
var select_ulX = 0; // 手指在页面中的坐标.初始值为0
var x = 0; // 被拖动元素在页面中的初始坐标为0
select_ul.addEventListener('touchstart', function(e) { // 给元素添加 手指触摸事件.
    select_ulX = e.targetTouches[0].pageX; // 获取第一根手指在页面中的坐标.
    this.offsetLeft = x; // 获取元素在页面中的坐标
})
select_ul.addEventListener('touchmove', function(e) { //给元素添加手指移动事件.
    var moveX = e.targetTouches[0].pageX - select_ulX; // 获取第一根手指在页面中移动结束的坐标.然后拿手指在页面中移动结束的坐标减去手指第一次触摸的坐标等于手指移动的距离.
    if (moveX > 0) {
        moveX = 0;
    }
    this.style.transform = 'translatex(' + x + moveX + 'rem' + ')';
    // 最后把手指移动的距离加上原本元素在页面中的坐标. 赋值给要拖动的元素.就能实现元素跟随手指移动而移动了.
    // 因为这个元素实现的时候没有Y坐标 以上全部只获取了X坐标.
})
var movie_detail_arrow = document.querySelector('.movie-detail-arrow')
movie_detail_arrow.addEventListener('click', function() {
    window.location.href = 'fsl-MaoYanMovie-01.html'
})
let hrefs = document.querySelector('.hrefs');
hrefs.addEventListener('click', () => {
    window.location.href = 'fsl-MaoYanMovie-03.html';
})